import React, {FC} from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  LayoutChangeEvent,
} from 'react-native';

import icon_female from '../../assets/icon_female.png';
import icon_add from '../../assets/icon_add.png';
import icon_qrcode from '../../assets/icon_qrcode.png';
import icon_male from '../../assets/icon_male.png';
import icon_setting from '../../assets/icon_setting.png';
import {observer} from 'mobx-react';
import MineStore from '../../stores/MineStore';
import UserStore from '../../stores/UserStore';

type PropsType = {
  callback: (bgImgHight: number) => void;
};
const UserInfo: FC<PropsType> = observer((props: PropsType) => {
  const {callback} = props;
  const {fans, followCount, favorateCount} = MineStore.accountInfo;
  const {avatar, nickName, redBookId, desc, sex} = UserStore.userInfo;
  return (
    <View
      style={styles.container}
      onLayout={(event: LayoutChangeEvent) => {
        const {height} = event.nativeEvent.layout;
        callback(height);
        console.log(JSON.stringify(event.nativeEvent.layout));
      }}>
      <View style={styles.userInfoLayout}>
        <Image style={styles.avatar} source={{uri: avatar}} />
        <Image style={styles.add} source={icon_add} />
        <View style={styles.userInfoRightLayout}>
          <Text style={styles.nameTxt}>{nickName}</Text>
          <View style={styles.accountLayout}>
            <Text style={styles.accountTxt}>小红书号: {redBookId}</Text>
            <Image style={styles.code} source={icon_qrcode} />
          </View>
        </View>
      </View>
      <Text style={styles.focusTxt}>{desc}</Text>
      <View style={styles.sexLayout}>
        <Image
          style={styles.sexImg}
          source={sex === 'male' ? icon_male : icon_female}
        />
      </View>

      <View style={styles.otherLayout}>
        <View style={styles.item}>
          <Text style={styles.countTxt}>{followCount}</Text>
          <Text style={styles.contentTxt}>关注</Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.countTxt}>{fans}</Text>
          <Text style={styles.contentTxt}>粉丝</Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.countTxt}>{favorateCount}</Text>
          <Text style={styles.contentTxt}>获赞与收藏</Text>
        </View>

        <View style={styles.blank} />
        <TouchableOpacity style={styles.editBtn}>
          <Text style={styles.editTxt}>编辑资料</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.SettingsBtn}>
          <Image style={styles.setting} source={icon_setting} />
        </TouchableOpacity>
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
  },
  iconLayout: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
  },
  blank: {
    flex: 1,
  },
  icon: {
    width: 30,
    height: 30,
    resizeMode: 'contain',
  },
  userInfoLayout: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-end',
    marginTop: 20,
    marginBottom: 10,
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    resizeMode: 'cover',
  },
  add: {
    width: 26,
    height: 26,
    resizeMode: 'contain',
    marginLeft: -20,
    marginTop: -20,
  },
  userInfoRightLayout: {
    marginLeft: 8,
  },
  nameTxt: {
    fontSize: 24,
    color: 'red',
    marginBottom: 10,
  },
  accountLayout: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  accountTxt: {
    fontSize: 16,
    color: 'red',
    marginRight: 4,
  },
  code: {
    width: 16,
    height: 16,
    resizeMode: 'contain',
  },
  focusTxt: {
    fontSize: 16,
    color: 'white',
    marginBottom: 8,
  },
  sexLayout: {
    width: 32,
    height: 24,
    backgroundColor: '#ffffff50',
    borderRadius: 12,
    marginTop: 12,
    marginBottom: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  sexImg: {
    width: 12,
    height: 12,
    resizeMode: 'center',
  },
  otherLayout: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  item: {
    alignItems: 'center',
    marginRight: 10,
  },
  countTxt: {
    color: 'white',
    fontSize: 18,
  },
  contentTxt: {
    color: '#aaa',
  },
  editBtn: {
    height: 30,
    borderRadius: 15,
    borderWidth: 1,
    borderColor: 'white',
    textAlign: 'center',
    textAlignVertical: 'center',
    paddingHorizontal: 10,
    marginRight: 10,
    justifyContent: 'center',
  },
  editTxt: {
    fontSize: 16,
    color: 'white',
  },
  SettingsBtn: {
    width: 40,
    height: 30,
    borderRadius: 15,
    borderWidth: 1,
    borderColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  setting: {
    width: 20,
    height: 20,
    tintColor: 'white',
  },
});
export default UserInfo;
